{{ $version := .version }}
{{ $v1 := cond (eq $version "nightly") "nightly/latest" $version }}
{{ $host := site.Data.matrix.host }}
{{ $matrix := site.Data.docs.administration.downloads }}
<div class="flex flex-col space-y-4">
  {{ range $matrix }}
  {{ $file := .file }}
  {{ $prefix := .prefix }}
  <div class="space-y-1 md:grid md:grid-cols-8 items-center">
    <div class="col-span-2">
      {{/* Platform */}}
      <span class="text-gray-700 dark:text-gray-300 text-lg font-semibold tracking-tight">
        {{ .title }}
      </span>
    </div>

    <div class="">
      {{/* File type */}}
      <span class="font-mono text-xs text-dark dark:text-gray-300">
        {{ .file_type }}
      </span>
    </div>

    <div class="w-min">
      {{/* Targets (ARM, x86_64, etc.) */}}
      <div class="flex space-x-1">
        {{ range .options }}
        {{ $vector := cond (eq $version "nightly") "vector/nightly" "vector" }}
        {{ $url := .download_url | replaceRE "{v1}" $v1 | replaceRE "{v2}" $version }}

        <a
          type="button"
          href="{{ $url }}"
          class="flex items-center space-x-1 py-1 px-2 border dark:border-gray-700 rounded-md dark:bg-dark hover:bg-gray-50 dark:hover:bg-black"
          download>

          {{/* Heroicon: outline/download */}}
          <span>
            <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary dark:text-primary h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
          </span>
          <span class="text-dark dark:text-primary font-semibold">
            {{ .arch }}
          </span>
        </a>
        {{ end }}
      </div>
    </div>
  </div>
  {{ end }}
</div>

{{ $version = cond (eq $version "nightly") "nightly/latest" $version }}
{{ $link := printf "https://packages.timber.io/vector/%s" $version }}
<div class="mt-8">
  <a href="{{ $link }}" class="text-sm dark:text-gray-300 hover:text-primary-dark dark:hover:text-secondary dark:text-primary text-secondary" rel="noopener" target="_blank">
    browse all files...
  </a>
</div>